<style>
.tab-item button {
  text-decoration: none;
  border: none;
  background-color: transparent;
}
.button-item {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
  border: none; /* 取消边框 */
  margin-right: -1000px; /* 设置右侧距离 */
}
.button-item:last-child {
  margin-right: 0; /* 最后一个元素右侧距离设为0 */
}

.button-item span {
  font-size: 19px;
  color: #333;
}

.button-item .span1 {
  font-size: 25px;
  color:  #3498db;
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #3498db;
  color: white;
  height: 50px;
}

.top-bar {
  text-align: center;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 500px;
  margin-bottom: 10px;
}

.time {
  font-size: 20px;
  position: absolute;
  top: 15px;
  left: 15px;
  right: auto;
}

.app-title {
  font-size: 25px;
  font-weight: bold;
}

.search-box {
  margin-left: 540px;
  margin-top: 45px;
  display: flex;
  align-items: center;
  width:  600px;
  margin-bottom: 20px;

}
.search-box .search-input{
  border-radius: 1000px;
  padding-left: 25px;
  height: 45px;
  font-size: 15px;
}
.content {
  margin-top: 20px;
  background-color: #eeeeee;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
}

.item {
  width: 300px;
  margin-bottom: 20px;
}

.item img {
  width: 100%;
  height: auto;
}

.item-info {
  padding: 10px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.description {
  font-size: 14px;
  color: #666;
}
a {
  text-decoration: none;
}
.tu{
  left: 0;
}
.content img {
  width: 240px;
  height: 360px;
  margin-bottom: 5px;
}
</style>
<template>
  <div class="home-container">
    <!-- 顶部栏 -->
    <div class="header">
      <div class="top-bar">
        <span class="time">{{ currentTime }}</span>
        <span class="app-title">游玩攻略</span>
        <!-- 这里可以添加更多图标或功能按钮 -->
      </div>
    </div>
      <!-- 搜索框 -->
      <div class="search-box">
<!--        <img src="../../static/image/搜索框.png" width="30px" height="30px" class="tu">-->
        <el-input
            placeholder="景点/酒店/休闲娱乐/美食/目的地"
            v-model="searchText"
            class="search-input"
        ></el-input>
      </div>
      <!-- 选项卡 -->
    <div class="container">
      <button class="button-item">
        <span class="span1">发现灵感</span>
      </button>
      <button class="button-item">
        <span>怎么玩</span>
      </button>
      <button class="button-item">
        <span>怎么吃</span>
      </button>
      <button class="button-item">
        <span>怎么住</span>
      </button>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <div class="item" v-for="item in items" :key="item.id">
        <img :src="items.image" alt="">
        <div class="item-info">
          <div class="title">{{ item.title }}</div>
          <div class="description">{{ item.description }}</div>
        </div>
      </div>
    </div>
  <!-- 底部导航栏 -->
  <div class="tab-bar">
    <router-link to="/">
      <div class="tab-item">
        <img src="../../../static/images/首页.png" width="50px" height="50px" alt="banner1">
        <button @click="homePage">首页</button>
      </div>
    </router-link>
    <router-link to="/strategy">
      <div class="tab-item">
        <img src="../../../static/images/游记.png" width="50px" height="50px" alt="banner1">
        <button @click="strategyPage">游记</button>
      </div>
    </router-link>
    <router-link to="/order">
      <div class="tab-item">
        <img src="../../../static/images/订单.png" width="50px" height="50px" alt="banner1">
        <button @click="orderPage">订单</button>
      </div>
    </router-link>
    <router-link to="/user">
      <div class="tab-item">
        <img src="../../../static/images/我的.png" width="50px" height="50px" alt="banner1">
        <button @click="userPage">我的</button>
      </div>
    </router-link>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: new Date().toLocaleTimeString(),
      searchText: '',
      activeTab: '发现灵感',
      items: [
        {
          id: "",
          image: "", // 替换为实际图片路径
          title: "",
          description: ""
        }
        // 可以继续添加更多的项目数据
      ]
    };
  },
  mounted() {
    this.updateTime();
    setInterval(() => {
      this.updateTime();
    }, 1000);
  },
  methods: {
    homePage(){
      this.$router.push({path: '/shou'});
    },
    strategyPage(){
      this.$router.push({path: '/lv'});
    },
    orderPage(){
      location.href=""
    },
    userPage(){
      location.href=""
    },
    updateTime() {
      this.currentTime = new Date().toLocaleTimeString();
    }
  }
};
</script>